<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>随便打TCS系统</title>
<script type="text/javascript" src="<%=basePath%>js/initPage.js"></script>
<!-- Bootstrap -->
<link href="<%=basePath%>vendors/bootstrap/dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- Font Awesome -->
<link
	href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet">
<!-- NProgress -->
<link href="<%=basePath%>vendors/nprogress/nprogress.css"
	rel="stylesheet">
<!-- iCheck -->
<link href="<%=basePath%>vendors/iCheck/skins/flat/green.css"
	rel="stylesheet">

<!-- bootstrap-progressbar -->
<link
	href="<%=basePath%>vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css"
	rel="stylesheet">
<!-- JQVMap -->
<link href="<%=basePath%>vendors/jqvmap/dist/jqvmap.min.css"
	rel="stylesheet" />
<!-- bootstrap-daterangepicker -->
<link
	href="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.css"
	rel="stylesheet">

<!-- Custom Theme Style -->
<link href="<%=basePath%>build/css/custom.min.css" rel="stylesheet">
</head>
<body class="nav-md">
	<%@ include file="loginCheck.jsp"%>
	<div class="container body">
		<div class="main_container">
			<div class="col-md-3 left_col">
				<div class="left_col scroll-view">
					<div class="clearfix"></div>
					<br />
				</div>
			</div>
			<!-- page content -->
			<div class="right_col" role="main">
				<!-- top tiles -->
				<div class="row tile_count">
					<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
						<span class="count_top"><i class="fa fa-user"></i>当前用户总数</span>
						<div id="user_sum" class="count">loading...</div>
					</div>

					<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
						<span class="count_top"><i class="fa fa-clock-o"></i> 今日新增</span>
						<div id="today_user_sum" class="count">loading...</div>
						<span class="count_bottom"><i class="green"><i
								class="fa fa-sort-asc"></i>3% </i> 对比昨天</span>
					</div>
					<c:if test="${adminUserId != 'd093179851af43dfbb1bc6639334b109'}">
						<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
							<span class="count_top"><i class="fa fa-user"></i> 总活跃用户</span>
							<div id="active_user_sum" class="count green">loading...</div>
							<span class="count_bottom"><i class="green"><i
									class="fa fa-sort-asc"></i>4.1% </i> 对比昨天</span>
						</div>
					</c:if>
					<c:if test="${adminUsergrade < 2  || adminUserId == 'ad745bb4090f4ef19fbd21a5bd0241c6'}">
						<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
							<span class="count_top"><i class="fa fa-user"></i> 今日充值</span>
							<div id="today_recharge_sum" class="count">loading...</div>
							<span class="count_bottom"><i class="red"><i
									class="fa fa-sort-desc"></i>12% </i> 对比昨天</span>
						</div>
						<c:if test="${adminUsergrade < 2 }">
						<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
							<span class="count_top"><i class="fa fa-user"></i> 总充值数</span>
							<div id="recharge_sum" class="count">loading...</div>
						</div>
						</c:if>
						<c:if test="${adminUserId == 'd093179851af43dfbb1bc6639334b109'}">
							<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
								<span class="count_top"><i class="fa fa-user"></i> 充值金额</span>
								<div id="recharge_money" class="count">loading...</div>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
								<span class="count_top"><i class="fa fa-user"></i> 提现金额</span>
								<div id="withdrawals_money" class="count">loading...</div>
							</div>
						</c:if>
						<c:if test="${adminUserId == 'ad745bb4090f4ef19fbd21a5bd0241c6'}">
							<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
								<span class="count_top"><i class="fa fa-user"></i> 话费余额</span>
								<div id="call_money" class="count" title="loading...">loading...</div>
							</div>
							<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
								<span class="count_top"><i class="fa fa-user"></i> 购物余额</span>
								<div id="shop_money" class="count" title="loading...">loading...</div>
							</div>
						</c:if>

						<c:if test="${adminUserId != 'd093179851af43dfbb1bc6639334b109'&& adminUserId != 'ad745bb4090f4ef19fbd21a5bd0241c6'}">
							<div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count" <c:if test="${isLTH == 1}">style="display:none;"</c:if>>
								<span class="count_top"><i class="fa fa-user"></i> 年总通话量</span>
								<div id="year_call_num" class="count">loading...</div>
								<span class="count_bottom"><i class="green"><i
										class="fa fa-sort-asc"></i>34% </i> 对比去年</span>
							</div>
						</c:if>

					</c:if>
				</div>
				<!-- /top tiles -->
				<div class="row">
					<div class="col-md-12 col-sm-12 col-xs-12">
						<div class="dashboard_graph">
							<div class="row x_title">
								<div class="col-md-6">

									<h3>
										新增用户统计 <small>
										<c:if test="${isLTH != 1}">新增用户以及充值统计</c:if>
										<c:if test="${isLTH == 1}">新增用户</c:if>
									</small>
									</h3>
								</div>
								<div class="col-md-6">
									<div id="reportrange" class="pull-right"
										style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
										<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <b
											class="caret"></b>
									</div>
								</div>
							</div>
							<div class="col-md-9 col-sm-9 col-xs-12">
								<div id="chart_plot_01" class="demo-placeholder"></div>
							</div>
							<div class="col-md-3 col-sm-3 col-xs-12 bg-white" <c:if test="${isLTH == 1}">style="display:none;"</c:if>>
								<div class="x_title">
									<h2>充值用户占比统计</h2>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-12 col-sm-12 col-xs-6">
									<div>
										<p>电话卡</p>
										<div class="">
											<div class="progress progress_sm" style="width: 76%;">
												<div class="progress-bar bg-green" role="progressbar"
													data-transitiongoal="80"></div>
											</div>
										</div>
									</div>
									<div>
										<p>购物卡</p>
										<div class="">
											<div class="progress progress_sm" style="width: 76%;">
												<div class="progress-bar bg-green" role="progressbar"
													data-transitiongoal="60"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-12 col-sm-12 col-xs-6">
									<div>
										<p>在线充值</p>
										<div class="">
											<div class="progress progress_sm" style="width: 76%;">
												<div class="progress-bar bg-green" role="progressbar"
													data-transitiongoal="40"></div>
											</div>
										</div>
									</div>
									<div>
										<p>空中充值</p>
										<div class="">
											<div class="progress progress_sm" style="width: 76%;">
												<div class="progress-bar bg-green" role="progressbar"
													data-transitiongoal="1"></div>
											</div>
										</div>
									</div>
								</div>

							</div>

							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<br />
				<div class="row" <c:if test="${isLTH == 1}">style="display:none;"</c:if>>
					<div class="x_panel" >

						<div class="x_title">
							<h2>
								通话记录 <small>最近通话的用户</small>
							</h2>
							<div class="clearfix"></div>
						</div>
						<div class="x_content">
							<table id="datatable" class="table table-striped table-bordered">
								<thead>
									<tr>
										<th>主叫</th>
										<th>被叫</th>
										<th>通话日期</th>
										<th>状态</th>
										<th>线路状态</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${list}" var="s" varStatus="z">
										<tr>
											<td>${s.caller}</td>
											<td>${s.calle164}</td>
											<td><fmt:formatDate value="${s.calltime}" type="date"
													pattern="yyyy-MM-dd" /></td>
											<td>${s.status}</td>
											<td>${s.sysnum}</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
					<div style="width: 100%; text-align: center;">
						<div id='page'></div>
					</div>
				</div>
			</div>
		</div>
		<!-- /page content -->
	</div>
	<script>
		/**
		 * 纯粹的JS分页插件，代码缺点：JS操作DOM冗余太多，太繁琐
		 */
		pageUtil.initPage('page', {
			totalCount : ${totlenum}, //总页数，一般从回调函数中获取。如果没有数据则默认为1页
			curPage : ${curPage}, //初始化时的默认选中页，默认第一页。如果所填范围溢出或者非数字或者数字字符串，则默认第一页
			showCount : 9, //分页栏显示的数量
			pageSizeList : [ 10 ], //自定义分页数，默认[5,10,15,20,50]
			defaultPageSize : 10, //默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中，则也为第一个
			isJump : true, //是否包含跳转功能，默认false
			isPageNum : true, //是否显示分页下拉选择，默认false
			isPN : true, //是否显示上一页和下一面，默认true
			isFL : true, //是否显示首页和末页，默认true
			jump : function(curPage, pageSize) { //跳转功能回调，传递回来2个参数，当前页和每页大小。如果没有设置分页下拉，则第二个参数永远为0。这里的this被指定为一个空对象，如果回调中需用到this请自行使用bind方法
				selectOEM();
			},
		});
	</script>

	<script type="text/javascript">
		function selectOEM() {
			location.href = "content_tonghuabaobiao";
		}

    </script>
	<!-- jQuery -->
	<script src="../vendors/jquery/dist/jquery.min.js"></script>
	<script>
		$(function() { 
			$.ajax({
				url : "conpartial",
				type : "post",
				dataType : "json",
				success : function(data) {
					$("#user_sum").html(data.user_sum);
					$("#today_user_sum").html(data.today_user_sum);
					$("#active_user_sum").html(data.active_user_sum);
					$("#today_recharge_sum").html(data.today_recharge_sum);
					$("#recharge_sum").html(data.recharge_sum);
					$("#year_call_num").html(data.year_call_num);
					$("#recharge_money").html(data.recharge_money);
					$("#withdrawals_money").html(data.withdrawals_money);
					$("#call_money").html(data.call_money).attr("title",data.call_money);
					$("#shop_money").html(data.shop_money).attr("title",data.shop_money);

				}
			});
		});
	</script>
	<!-- Bootstrap -->
	<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
	<!-- FastClick -->
	<script src="../vendors/fastclick/lib/fastclick.js"></script>
	<!-- NProgress -->
	<script src="../vendors/nprogress/nprogress.js"></script>
	<!-- Chart.js -->
	<script src="../vendors/Chart.js/dist/Chart.min.js"></script>
	<!-- gauge.js -->
	<script src="../vendors/gauge.js/dist/gauge.min.js"></script>
	<!-- bootstrap-progressbar -->
	<script
		src="<%=basePath%>vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
	<!-- iCheck -->
	<script src="<%=basePath%>vendors/iCheck/icheck.min.js"></script>
	<!-- Skycons -->
	<script src="<%=basePath%>vendors/skycons/skycons.js"></script>
	<!-- Flot -->
	<script src="<%=basePath%>vendors/Flot/jquery.flot.js"></script>
	<script src="<%=basePath%>vendors/Flot/jquery.flot.pie.js"></script>
	<script src="<%=basePath%>vendors/Flot/jquery.flot.time.js"></script>
	<script src="<%=basePath%>vendors/Flot/jquery.flot.stack.js"></script>
	<script src="<%=basePath%>vendors/Flot/jquery.flot.resize.js"></script>
	<!-- Flot plugins -->
	<script
		src="<%=basePath%>vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
	<script
		src="<%=basePath%>vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
	<script src="<%=basePath%>vendors/flot.curvedlines/curvedLines.js"></script>
	<!-- DateJS -->
	<script src="<%=basePath%>vendors/DateJS/build/date.js"></script>
	<!-- JQVMap -->
	<script src="<%=basePath%>vendors/jqvmap/dist/jquery.vmap.js"></script>
	<script
		src="<%=basePath%>vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
	<script
		src="<%=basePath%>vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
	<!-- bootstrap-daterangepicker -->
	<script src="<%=basePath%>vendors/moment/min/moment.min.js"></script>
	<script
		src="<%=basePath%>vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
	<!-- Custom Theme Scripts -->
	<script src="<%=basePath%>build/js/custom.min.js"></script>
</body>
</html>